<!DOCTYPE html>
<html
  layout:decorator="components/layout"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  lang="zh-CN"
>
<head><title>活跃IP</title></head>
<body>
<div
  layout:fragment="content"
  id="app" v-cloak
>
  <div class="container">


    <el-row>
      <div class="myHeader">
        <div class="myHeader-title">
          活跃IP统计
        </div>
        <div class="myHeader-tool">

          <el-button type="primary" size="mini" icon="el-icon-search" @click="toggle">高级搜索</el-button>

          &nbsp;
          所在机房:
          <el-select v-model="form.houseId" @change="searchPage" placeholder="请选择" size="mini" clearable>
            <el-option v-for="house in baseHouseInfoList" :label="house.houseName" :key="house.id" :value="house.id">
            </el-option>
          </el-select>

          &nbsp;
          协议类型:
          <el-select v-model="form.protocol" @change="searchPage" placeholder="请选择" size="mini" clearable>
            <el-option v-for="[key,val] in fieldFormatter.hotIp.protocolMap" :label="val" :key="key" :value="key">
            </el-option>
          </el-select>

        </div>
      </div>
    </el-row>

    <el-row>
      <el-form label-width="100px" class="container-search" v-show="formShow">
        <el-row :gutter="10">
          <el-col :span="9">
            <el-form-item label="应用IP:">
              <el-input
                v-model="form.findIpListIp"
                clearable
                show-word-limit
                maxlength="64"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label-width="0">
              <rx-search-action
                v-model="form.ipAction"
              ></rx-search-action>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="应用端口:">
              <el-input
                v-model="form.port"
                clearable
                show-word-limit
                maxlength="30"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="首次采集时间:">
              <rx-range-date
                v-model="form.firstTimeRange"
                @change="arr => changeRangeDate('findIpListFirstTimeStart', 'findIpListFirstTimeEnd')(arr)"
              ></rx-range-date>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="最后活跃时间:">
              <rx-range-date
                v-model="form.lastTimeRange"
                @change="arr => changeRangeDate('findIpListLastTimeStart', 'findIpListLastTimeEnd')(arr)"
              ></rx-range-date>
            </el-form-item>
          </el-col>

        </el-row>

        <div style="text-align:center; margin-bottom:20px">
          <el-button type="primary" size="medium" @click="searchPage">查 找</el-button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-button type="primary" size="medium" @click="resetPage">重 置</el-button>
        </div>
      </el-form>
    </el-row>

    <div>
      <template>
        <my-table
          :data="page.records"
          :columns="columns"
          @handle-selection-change="selection"
        >
          <template #reg_domain_count="scope">
            <a
              href="#"
              @click.stop.prevent="showFilingWindow('regDomainCount', scope.row.findIpListIp)"
            >{{scope.row.regDomainCount}}</a>
          </template>
          <template #un_reg_domain_count="scope">
            <a
              href="#"
              @click.stop.prevent="showFilingWindow('unRegDomainCount', scope.row.findIpListIp)"
            >{{scope.row.unRegDomainCount}}</a>
          </template>
        </my-table>
        <div class="pagination">
          <el-pagination
            background
            @size-change="changeSize"
            @current-change="goto"
            :current-page="page.current"
            :page-sizes="[10, 20, 30]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
          ></el-pagination>
        </div>
        <div class="pagination-tool">
          <el-button
            type="primary"
            size="mini"
            @click="reportShow"
            v-realm="'regulatory-log:slog-hot-ip:edit'"
          >IP上报
          </el-button>

          <el-button
            type="primary"
            size="mini"
            @click="isTabHandleShow = ! isTabHandleShow"
            v-realm="'regulatory-log:slog-hot-ip:edit'"
          >批量处置
          </el-button>
          <el-button
            type="primary"
            size="mini"
            @click="cancelDeal"
            v-realm="'regulatory-log:slog-hot-ip:edit'"
          >取消处置
          </el-button>
          <el-button
            type="primary"
            size="mini"
            @click="exportFile"
            v-realm="'regulatory-log:slog-hot-ip'"
          >导出
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click="deleteSelected"
            v-realm="'regulatory-log:slog-hot-ip:edit'"
          >批量删除
          </el-button>

        </div>
      </template>
      <el-dialog
        title="活跃IP上报"
        :visible.sync="isReportShow"
      >
        <table
          width="100%"
          border="1"
          cellpadding="0"
          cellspacing="0"
          class="digest-table"
        >
          <tbody>
          <tr>
            <td class="TitleTD">活跃IP总数</td>
            <td class="ContentTD">{{reportNum}}</td>
          </tr>
          <tr>
            <td class="TitleTD">上报数据</td>
            <td class="ContentTD">完整上报</td>
          </tr>
          <tr>
            <td class="TitleTD"><label for="msgInfo">执行描述</label></td>
            <td class="ContentTD"><textarea
              id="msgInfo"
              cols="39"
              v-model="msgInfo"
            >{{ msgInfo }}</textarea></td>
          </tr>
          </tbody>
        </table>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="report"
            v-realm="'regulatory-log:slog-hot-ip:edit'"
          >确 定
          </el-button>
        </div>
      </el-dialog>
      <transition>
        <div
          class="container"
          v-if="isTabHandleShow"
        >
          <div class="myHeader">
            <div class="myHeader-title">
              IP信息处置
            </div>
          </div>

          <table
            width="100%"
            border="0"
            cellpadding="0"
            cellspacing="0"
            class="el-table el-table--border"
          >
            <tbody>
            <tr>
              <td
                class="TitleTD"
                width="200"
              >处置结果：
              </td>
              <td class="ContentTD">
                <rx-radio
                  v-model="dealData.action"
                  :map="fieldFormatter.hotIp.dealResultMap"
                ></rx-radio>
            </tr>
            <tr>
              <td class="TitleTD"><label for="currentMsg">处置备注：</label></td>
              <td class="ContentTD">
                  <textarea
                    id="currentMsg"
                    cols="39"
                    title="请填写备注信息"
                    v-model="dealData.msg"
                  >{{ dealData.msg }}</textarea>
                <div
                  id="currentMsg_message"
                  class="msg"
                ><label for="currentMsg">请填写备注信息</label></div>
            </tr>
            </tbody>
          </table>
          <div align="center">
            <el-button
              size="mini"
              type="primary"
              @click="deal"
              v-realm="'regulatory-log:slog-hot-ip:edit'"
            >确认
            </el-button>
            &nbsp;
            <el-button
              size="mini"
              type="primary"
              @click="resetTabHandle"
            >重置
            </el-button>
          </div>
        </div>
      </transition>
      <el-dialog
        :title="filingWindow.title"
        :visible.sync="filingWindow.show"
        width="80%"
      >
        <el-table
          :data="filingWindow.data"
        >
          <template v-for="column in filingWindow.columns">
            <el-table-column
              :type="column.type"
              :prop="column.prop"
              :label="column.title"
              :align="column.align"
              :sortable="column.sortable"
              :width="column.width"
              :formatter="column.formatter"
              v-if="column.customComponent"
            >
              <!--suppress HtmlUnknownAttribute -->
              <template #default="scope">
                <!--这里将传递给模板当前行的数据-->
                <slot
                  :name="humpToLine(column.prop)"
                  :row="scope.row"
                ></slot>
              </template>
            </el-table-column>
            <el-table-column
              :type="column.type"
              :prop="column.prop"
              :label="column.title"
              :align="column.align"
              :sortable="column.sortable"
              :width="column.width"
              :formatter="column.formatter"
              v-else
            >
            </el-table-column>
          </template>
        </el-table>
      </el-dialog>
    </div>
  </div>
</div>
<div layout:fragment="js">
  <script src="/static/js/module/slog/model/HotIp.js"></script>
  <script src="/static/js/module/slog/model/SlogHotIpDomain.js"></script>
  <script src="/static/js/module/slog/api/slogHotIpApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseHouseInfoApi.js"></script>
  <script src="/static/js/module/slog/api/slogHotIpDomainApi.js"></script>
  <script src="/static/js/module/slog/admin_active_ip.js"></script>
</div>
</body>
</html>
